<template lang="html">
  <div class="history-interesting">
    <h3>你可能感兴趣的音乐单曲 <img src="../../../../static/img/history-play_goback.png" alt=""> </h3>
    <ul class="interest-list" >
      <li v-for='(item,index) in interestArr' :key='index' @click="playHandler(item)">
        <img :src="item.pic_big" alt="">
        <p>{{item.title}}</p>
        <span>{{item.author}}-{{item.album_title}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'

export default {
  name:'Interesting',
  data(){
    return{
      interestArr:[]
    }
  },
  mounted(){
    var url="http://www.wwtliu.com/sxtstu/music/baidu/list.php?type=2&count=3&offset=3";
    this.$axios.get(url)
    .then(res=>{
      this.interestArr = res.data.song_list
    })
    .catch(error=>{
      console.log(error)
    })
  },
  methods: {
    playHandler(item){

      this.$axios.get("http://www.wwtliu.com/sxtstu/music/baidu/play.php?mid=" + item.song_id)
        .then(res => {
          if(!res.data){return}
          this.updataPlay(true)
          this.updataCurrentSong(res.data)
          this.addSongArr(res.data)
          this.updataClearBtn(true)
          this.songdata = res.data;
        })
        .catch(error => {
          console.log(error)
        })
    },
    ...mapMutations(['updataPlay','updataCurrentSong','addSongArr','updataClearBtn'])
  },
  computed: {
    ...mapState(['clearBtn'])
  }
}
</script>

<style lang="less" scoped>
.history-interesting{
  width:100%;
  background-color: #fff;
  margin-top: 20/100rem;

  h3{
    font-size: 30/100rem;
    line-height: 85/100rem;
    font-weight: 400;
    margin-left: 20/100rem;
    position: relative;

    img{
      width: 32/100rem;
      height: 32/100rem;
      position: absolute;
      top: 30/100rem;
      right:20/100rem;
    }
  }
  .interest-list{
    margin-left: 20/100rem;
    height: 310/100rem;

    li{
      width: 32%;
      height: 100%;
      float: left;

      img{
        width: 210/100rem;
        height: 210/100rem;
      }
      p{
        font-size: 25/100rem;
        width: 100%;
        height: 40/100rem;
        color:#333;
        float: left;
        line-height: 40/100rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      span{
        font-size: 20/100rem;
        width: 100%;
        color:#666;
        display: block;
        height: 30/100rem;
        line-height: 30/100rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        float: left;
      }
    }
    li:nth-child(2){
      margin: 0 2%;
    }
  }
}
</style>
